<template>
    <div class="about">
        <h1 @click="change">This is an about page</h1>
        <!--    <h2>num:{{$store.state.num}}</h2>-->
        <button @click="increase">+1</button>
        <button @click="Decreasing(10)">-10</button>
        <h2>num:{{num}}</h2>
    </div>
</template>
<script>
    // 当所有DOM元素加载完成之后再执行回调函数
    // window.onload=function () {
    //   let d = document.querySelector('.about h1');
    //   console.log(d)
    // }
    import hunru from '../mixin/idx.js'
    import {mapState,mapMutations} from 'vuex'

    export default {
        //局部混入
        mixins: [hunru],
        name: 'About',
        methods: {
            increase() {
                //每次通过commit去触发mutations
                this.$store.commit('Incremental', 1);
                //传过去的payload诗歌对象
                // this.$store.commit('Incremental',{count:1})
            },
            //默认的写法
            // reduce() {
            //     //每次通过commit去触发mutations
            //     this.$store.commit('Decreasing', 1);
            //     //传过去的payload诗歌对象
            //     // this.$store.commit('Incremental',{count:1})
            // },

            //对象的写法
            // ...mapMutations({
            //     Decreasing:'Decreasing',
            //当方法名和mutations里面的方法名一致可以简写
            //         Decreasing
            // })

            //数组的写法  方法名必须和mutations里面的方法名一致 如果需要传参可在方法名上（参数）写
            ...mapMutations(['Decreasing']),

        },
        //1.默认写法
        // computed: {
        //     num() {
        //         return this.$store.state.num
        //     }
        // },

        //2.对象写法 需要先引入vuex中的mapState   computed只能写一次
        // computed: mapState({
        //     num: state => state.num,
        // }),

        //3.数组写法  computed只能写一次
        //num:计算属性和state里的数据（num）必须一致
        // computed:mapState(['num']),

        //4.运用展开运算符  可以写多个内容
        computed:{
            ...mapState(['num']),
            /*num(){
                .........
            }*/
        }
    }

</script>

